<html>
	<head>
		<title>My first Three.js app</title>
		<style>canvas { width: 100%; height: 100%; backgroundColor: #000000; }</style>
	</head>
	<body id="myCanvas" style="background-color: #ffffff;">
		<script src="../build/three.js"></script>
		
		<script>
		    //program function
		    var PI2 = Math.PI * 2;
            var program = function ( context ) {

                context.beginPath();
                context.arc( 0, 0, 1, 0, PI2, true );
                context.fill();

            }
		    
		    
		    //scene
			var scene = new THREE.Scene();
			
			//camera
			var camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 1000 );
			camera.position.set(0, 0, 5);
			
			//render info
			var renderer = new THREE.WebGLRenderer();
			//var renderer = Detector.webgl? new THREE.WebGLRenderer(): new THREE.CanvasRenderer();
			renderer.setSize( window.innerWidth, window.innerHeight );
			document.body.appendChild( renderer.domElement );
			
			//entity
			var geometry = new THREE.CubeGeometry(1,1,1);
			var material = new THREE.MeshLambertMaterial( { color: 0x0000ff , opacity: 0.6, transparent: 0.5} );
			var cube = new THREE.Mesh( geometry, material );
			//scene.add(cube);
			
			//light
			//var pointLight = new THREE.PointLight(0xffffff, 1, 10);
			var pointLight = new THREE.PointLight(0xffffff);
			//pointLight.position.set(0, 0, 5);
			scene.add(pointLight);
			/*
			var light = new THREE.PointLight( 0xffffff, 1, 6 );
            light.position.set( 3, 3, 3 );
            scene.add( light );
            */
           
			var particle = new THREE.Particle( new THREE.ParticleCanvasMaterial( { color: 0x80ff80, program: program } ) );
            particle.scale.x = particle.scale.y = particle.scale.z = 0.5;
            scene.add( particle );
			
			
			var loader = new THREE.JSONLoader();
            loader.load( 'obj/monkey.js', function ( geometry ) {

                mesh = new THREE.Mesh( geometry, new THREE.MeshLambertMaterial( { color: 0xffffff, shading: THREE.FlatShading, overdraw: true } ) );
                scene.add( mesh );

            } );
			
			
			//main function
			function render(){
			    
			    requestAnimationFrame(render);
			    
			    var time = Date.now() * 0.0005;
			    
			    particle.position.x = Math.sin( time * 0.7 ) * 3;
                particle.position.y = Math.cos( time * 0.3 ) * 4;
                particle.position.z = Math.sin( time * 0.5 ) * 3;
			    
			    cube.rotation.x += 0.025;
			    cube.rotation.y += 0.015;
			    
			    if ( mesh ) {
			        mesh.rotation.x -= 0.025;
			        //mesh.rotation.y -= 0.015;
			    }
			    
			    pointLight.position.x = particle.position.x;
                pointLight.position.y = particle.position.y;
                pointLight.position.z = particle.position.z;
			     
			    renderer.render(scene, camera);
			}
			render();
			
			
		</script>
	</body>
</html>